<template>
	<view>
		<view class="nav_bar">
			<view class="search items-center justify-betwee">
				<u-icon size="40" name="search"></u-icon>
				<input style="margin-left: 30rpx;" @confirm="handleInput" v-model="valueKey" type="text" placeholder="搜索费率模版名称">
			</view>
		</view>
		<view class="content">
			<view class="card" @click="handleItem(item)" v-for="item in dataList" :key="item.id">
				<view class="title">
					{{item.name}}
				</view>
				<view class="list items-center justify-between">
					<view class="item">
						<view class="num">
							{{item.charge00}}
						</view>
						<view class="text">
							快充尖
						</view>
					</view>
					<view class="item">
						<view class="num">
							{{item.charge01}}
						</view>
						<view class="text">
							快充峰
						</view>
					</view>
					<view class="item">
						<view class="num">
							{{item.charge02}}
						</view>
						<view class="text">
							快充平
						</view>
					</view>
					<view class="item">
						<view class="num">
							{{item.charge03}}
						</view>
						<view class="text">
							快充谷
						</view>
					</view>
					<view class="item">
						<view class="num">
							{{item.serviceCharge}}
						</view>
						<view class="text">
							快充服务费
						</view>
					</view>
				</view>
				<view class="list items-center justify-between">
					<view class="item">
						<view class="num">
							{{item.slowCharge00}}
						</view>
						<view class="text">
							慢充尖
						</view>
					</view>
					<view class="item">
						<view class="num">
							{{item.slowCharge01}}
						</view>
						<view class="text">
							慢充峰
						</view>
					</view>
					<view class="item">
						<view class="num">
							{{item.slowCharge02}}
						</view>
						<view class="text">
							慢充平
						</view>
					</view>
					<view class="item">
						<view class="num">
							{{item.slowCharge03}}
						</view>
						<view class="text">
							慢充谷
						</view>
					</view>
					<view class="item">
						<view class="num">
							{{item.slowServiceCharge}}
						</view>
						<view class="text">
							慢充服务费
						</view>
					</view>
				</view>
			</view>
		</view>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageNo:1,
				count:1,
				dataList:[],
				valueKey:''
			};
		},
		onLoad() {
			this.loadData()
		},
		onReachBottom() {
			this.count > this.pageNo ? (this.pageNo++,this.loadData()) : ''
		},
		onPullDownRefresh() {
			this.loadData()
		},
		methods:{
			handleInput(){
				this.pageNo = 1
				this.loadData()
			},
			handleItem(item){
				this.prePage().setPrice(item)
				uni.navigateBack()
			},
			async loadData() {
				const data = {
					uid: uni.getStorageSync('uid'),
					pageNo: this.pageNo,
					pageSize: '10',
					key:this.valueKey
				};
				const res = await this.$request('user/zz-station-price', data, { showLoading: true });
				uni.stopPullDownRefresh()
				if (res.result == 0) {
					this.pageNo > 1 ? this.dataList = this.dataList.concat(res.data.list) : this.dataList = res.data.list
					this.count = Math.ceil(res.data.count / 10);
				} else {
					this.$util.msg(res.resultNote);
				}
			},
		},
	}
</script>

<style lang="scss" scoped> 
	.nav_bar{
		background: $uni-color-bg;
		padding: 30rpx 50rpx;
		.search{
			width: 620rpx;
			height: 88rpx;
			background: #FFFFFF;
			border-radius: 44rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
		}
	}
	.content{
		padding: 20rpx;
		.card{
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 30rpx;
			margin-bottom: 30rpx;
			.title{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #222222;
				line-height: 40rpx;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #E7E7E7;
				margin-bottom: 20rpx;
			}
			.list{
				margin-bottom: 20rpx;
				.item{
					width: calc(100% / 5);
					.num{
						width: 100%;
						overflow:hidden; //超出的文本隐藏
						text-overflow:ellipsis; //溢出用省略号显示
						white-space:nowrap; //溢出不换行
						font-size: 34rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #080808;
						text-align: center;
					}
					.text{
						width: 100%;
						overflow:hidden; //超出的文本隐藏
						text-overflow:ellipsis; //溢出用省略号显示
						white-space:nowrap; //溢出不换行
						font-size: 26rpx;
						font-family: PingFang SC;
						color: #919191;
						text-align: center;
					}
				}
			}
			.items{
				text-align: center;
				.num{
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #080808;
				}
				.text{
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #919191;
				}
			}
		}
		.btn{
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #222222;
			line-height: 36rpx;
			text-align: center;
		}
	}
</style>
